<template>
  <el-dialog
    v-model="dialogFormVisible"
    class="custom-dialog"
    :before-close="closeDialog"
    :close-on-click-modal="closeOnClickModal"
    :title="dialogTitle"
    :width="`${dialogWidth}px`"
  >
    <el-form
      ref="dialogFormRef"
      :model="formData"
      class="margin-top-sm padding-lr-sm"
      :rules="dialogRules"
      label-position="right"
      label-width="100px"
    >
      <el-form-item label="模板名称" prop="templateName">
        <el-input
          v-model="formData.templateName"
          maxlength="50"
          placeholder="请输入模板名称"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="分类" prop="formType">
        <el-select v-model="formData.formType" placeholder="请选择分类" clearable class="all-width">
          <el-option
            v-for="(option, index) in cateList"
            :key="index"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { computed, nextTick, reactive, ref, watch } from 'vue';
  import { ElMessage } from 'element-plus';

  import {
    postHandbookTemplateAdd as addData,
    postUpdate as updateData,
  } from '@/api/handbookTemplate/index';

  const props = defineProps({
    options: {
      type: Object,
      required: true,
      default: () => {
        return {
          width: 0,
          title: '',
          modal: false,
          visible: false,
          defaultValue: {},
          cancelText: '取消',
          confirmText: '确定',
          cate: [],
        };
      },
    },
  });

  const emit = defineEmits(['confirm', 'close']);

  let formData = ref(props.options.defaultValue);
  const isEdit = ref(false);

  const dialogTitle = computed(() => {
    return props.options.title;
  });

  const dialogWidth = computed(() => {
    return props.options.width;
  });

  const closeOnClickModal = computed(() => {
    return props.options.modal;
  });
  const cateList = computed(() => {
    return props.options.cate;
  });

  // 组件ref
  const dialogFormRef = ref();
  const dialogRules = {
    formType: [{ required: true, message: '请填写分类', trigger: 'blur' }],
    templateName: [{ required: true, message: '请填写模板名称', trigger: 'blur' }],
  };

  function submitForm() {
    dialogFormRef.value
      .validate()
      .then(async () => {
        try {
          let result = isEdit.value
            ? await updateData(formData.value)
            : await addData(formData.value);

          if (result.code === 200) {
            ElMessage({
              message: `${isEdit.value ? '编辑' : '新建'}成功`,
              type: 'success',
            });
            emit('confirm');
          }
        } catch (error) {
          console.log('error', error);
        }
      })
      .catch((error) => {
        console.log('error', error);
        ElMessage({
          message: '参数验证错误，请仔细填写表单数据!',
          type: 'error',
        });
      });
  }
  function rest() {
    formData.value = {};
    isEdit.value = false;
  }
  const dialogFormVisible = ref(props.options.visible);
  function showDialog() {
    dialogFormVisible.value = true;
    nextTick(() => {
      dialogFormRef.value.resetFields();
    });
  }
  function closeDialog() {
    rest();
    emit('close');
  }
  watch(
    () => props.options.visible,
    (val) => {
      dialogFormVisible.value = val;
    },
  );
  watch(
    () => props.options.defaultValue,
    (val) => {
      formData.value = val;
    },
  );
</script>

<style lang="scss" scoped></style>
